<template>
  <div class="MessageDetail">
    <x-header @on-click-back="getback" :left-options.preventGoBack="true" :left-options="{backText: ''}">消息详情</x-header>
    <scroller>
      <div style="padding:44px 6px 0 6px">
        <div style="background: #fff;border-radius: 5px;padding: 12px;text-align: left">
          <div style="font-size: 18px;padding:8px 0 0 0;font-weight: 600" v-if="MoneyMes.rechargeType==1">[通知]充值金额
          </div>
          <div style="font-size: 18px;padding:8px 0 0 0;font-weight: 600" v-if="MoneyMes.rechargeType==2">[通知]充值套餐
          </div>
          <div style="color: #888;padding:0 0 12px 0">{{MoneyMes.payTime}}</div>
          <div style="color: #888">
            <p>
              尊敬的{{user.name}}：
            </p>
            <p v-if="MoneyMes.rechargeType==1" style="text-indent: 2em;padding-top: 5px">
              您好，您充值{{MoneyMes.rechargeAmount}}元已到账，请注意查收。感谢您对{{MoneyMes.shopName}}书吧的支持。
            </p>
            <p v-if="MoneyMes.rechargeType==2"  style="text-indent: 2em;padding-top: 5px">
              您好，您充值{{MoneyMes.setMealName}}套餐已到账，请注意查收。感谢您对{{MoneyMes.shopName}}书吧的支持。
            </p>
            <p style="text-align: right;padding-top: 10px">
              {{MoneyMes.shopName}}客服敬上
            </p>

          </div>
          <!--<div class="getMoney" @click="getMoney">点击续费!</div>-->
          <!--<div>-->
          <!--<img src="static/icon/my_btn_Message-push_banner.png" alt="" style="width: 100%">-->
          <!--</div>-->
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  import Header from './../Header'
  import {UserInfo} from '../../api/mine'
  import {XHeader} from 'vux'
  import {mapState} from 'vuex'

  export default {
    name: 'MoneyDetail',
    data () {
      return {
        user: {}
      }
    },
    methods: {
      getMoney () {
        this.$router.push({
          path: '/Mine/Recharge'
        })
      },
      getback () {
        console.log('11111111')
        this.$router.go(-1)
      }
    },
    created () {
      UserInfo().then(res => {
        this.user = res.data.data
      })
    },
    computed: {
      ...mapState({
        MoneyMes: state => state.MoneyMes
      })
    },
    components: {
      XHeader
    },
  }
</script>

<style lang="less" type="text/less">
  .MessageDetail {
      .vux-header {
        background: #fff;
        position: fixed;
        z-index: 10;
        width: 100%;
        padding: 0;
        top: 0;
        .vux-header-title {
          color: #000;
          font-size: 16px;
          font-weight: 600;
        }
        .vux-header-left {
          .left-arrow {
            top: -7px;
            &:before {
              border-color: #000;
              border-width: 1px 0 0 1px;
              width: 10px;
              height: 10px;
            }
          }
        }
      }
    font-size: 14px;
    .getMoney {
      color: @common-color;
      padding: 8px 0;
    }
  }
</style>
